<div ng-controller="AppCtrl as ctrl" layout-fill layout="column" class="inset" ng-cloak>
  <p>Toast can be dismissed with a swipe, a timer, or a button.<br/></p>

  <div layout="row" layout-align="space-around">
    <div class="spacer"></div>
    <md-button ng-click="ctrl.showSimpleToast()">
      Show Simple
    </md-button>
    <md-button class="md-raised" ng-click="ctrl.showActionToast()">
      Show With Action
    </md-button>
    <div class="spacer"></div>
  </div>

  <div layout="row" id="toastBounds">
    <div>
      <p><b>Toast Position: "{{ctrl.getToastPosition()}}"</b></p>
      <md-checkbox ng-repeat="(name, isSelected) in ctrl.toastPosition"
                   ng-model="ctrl.toastPosition[name]">
        {{name}}
      </md-checkbox>
    </div>
  </div>

  <div layout="row">
    <md-button class="md-primary md-fab md-fab-bottom-right">
      FAB
    </md-button>
    <md-button class="md-accent md-fab md-fab-top-right">
      FAB
    </md-button>

  </div>
</div>
